<template>
  <div>
     <h2>商品清单如下</h2>
     <div v-for="(item,index) in arr" :key="index">
      <span>{{item.shopName}}</span> <span>{{item.price}}元/份</span>
     </div>
     <p>请选择购买数量:</p>
     <MyeatFood v-for="(item) in arr" :key="item.price" v-model="item.count" :obj="item"></MyeatFood>
     <br>
     <p>总价为:{{sum}}</p>
   </div>
  
</template>
 
<script>
import MyeatFood from "./components/MyeatFood.vue"
export default {
  components: {
    MyeatFood,
  },
  props: {},
  data() {
    return {
      arr: [
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
    };
  },
  computed: {
    sum(){
      return this.arr.reduce((acc, item) => {
         return acc + item.price*item.count
    },0)
  }},
  watch: {},
  created() {},
  methods: {}
};

</script>

<style scoped>
     
</style>